import React from 'react';
import PropTypes from 'prop-types';
import shallowEqual from './shallowEqual';

class Item extends React.Component {
    static propTypes = {
        item: PropTypes.number,
        update: PropTypes.func,
    };

    acc = (e) => {
        this.props.update(this.props.item + 1);
    };

    // 不然每次全部都会刷新
    shouldComponentUpdate(nextProps, nextState) {
        // if (this.props.item === nextProps.item) {
        //     return false;
        // } else {
        //     return true;
        // }
        // 为什么会返回 false
        return !shallowEqual(this.props, nextProps)
    }

    render() {
        console.dir('item render');
        return (
            <li onClick={this.acc}>
                <button>{this.props.item}</button>
            </li>
        )
    }
}

export default Item;
